// 写一个头部组件
import { useState } from "react";
import { useNavigate } from 'react-router-dom';
import logo from "@/assets/header/logo.jpg";
import "./index.less";
import { Menu } from 'antd';

const Header = () => {
    const routeArr = [
        {
            label: "首页",
            key: "home",
        },
        {
            label: "产品中心",
            key: "product",
            children: [
                {
                    label: '新产品',
                    key: 'new'
                }, {
                    label: 'GMP兽药',
                    key: 'gmp'
                },
                {
                    label: '固态预混料',
                    key: 'solid'
                },
                {
                    label: '液态预混料',
                    key: 'liquid'
                },
                {
                    label: '水环境修复剂',
                    key: 'water'
                }
            ]
        },
        {
            label: "应用案例",
            key: "case",
        },
        {
            label: "生态养殖",
            key: "culture",
        },
        {
            label: "公司掠影",
            key: "corporation",
        },
        {
            label: "新闻中心",
            key: "news",
        },
        {
            label: "关于我们",
            key: "about",
        },
        {
            label: "加入我们",
            key: "contact",
        },
    ];

    const [current, setCurrent] = useState("home");

    const navigate = useNavigate();

    const handleClick = (e) => {
        console.log(e);
        setCurrent(e.key);
        // 跳转路由到相应的页面
        navigate(`/${e.key}`);
    }

    return (
        <div className="header_box">
            <div className="logo_box">
                <img className="logo" src={logo} />
                <div>蒂业生物科技</div>
            </div>
            <Menu className="header_menu" onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={routeArr} />
        </div>
    );
}


export default Header;
